import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  InteractionManager,
  NativeModules,
  BackHandler,
  SafeAreaView,
} from 'react-native';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  screenWidth,
  px2dp,
  isAndroid
} from '@/styles';
import { msg, _ } from '@/common';
// import GoodsDefaultPic from './goods-default-pic';
import { featchGoodsDetail } from '@/api/goods';
import XmWebview from 'react-native-autoheight-webview';
import { customStyle } from '@/common/util';
import XmSwiper from '../../../../components/XmSwiper';

/**
 * @author kanglang
 * @description 综述
 * @createDate 2020/8/17
 *
 */
export default class Summarize extends Component {
  constructor(props) {
    super(props);
    this.state = {
      goodsArr: [],
    };
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.loadSummarize();
    });
  }

  loadSummarize = () => {
    const { id } = this.props;
    featchGoodsDetail({ id }).then((res) => {
      if (res.success) {
        if (res.data) {
          const goodsDetail = res.data;
          const goodsPic = goodsDetail && goodsDetail.appGoodsPicVOS;
          let goodsArr = [];
          if (goodsPic && goodsPic.length > 0) {
            goodsArr = goodsPic.map((item, index) => {
              item.icon = item.picFileId;
              return item;
            });
          }
          this.setState({ goodsDetail, goodsArr });
        } else {
          msg.emit('app:tip', { text: res.msg });
        }
      } else {
        msg.emit('app:tip', { text: res.msg });
      }
    });
  }

  render() {
    const { goodsArr, goodsDetail } = this.state;
    return (
      <SafeAreaView style={styles.safeView}>
        <View style={styles.container}>
          <ScrollView showsVerticalScrollIndicator={false}>
            <View style={styles.headerWrap}>
              <View style={styles.swiperContainor}>
                {goodsArr && goodsArr.length > 0 ? (
                  <XmSwiper imageData={goodsArr} duration={2} showPageNo />
                ) : (
                  <>
                    {/* <GoodsDefaultPic /> */}
                  </>

                )}
              </View>
              <View style={styles.headTxtWrap}>
                <View style={{ display: 'flex', flexDirection: 'row' }}>
                  <Text style={styles.txtName}>{goodsDetail && goodsDetail.name}</Text>
                  <Text style={styles.salesReal}>
                    销量
                    {' '}
                    {goodsDetail && goodsDetail.salesReal}
                    {' '}
                  </Text>
                </View>

                <Text style={styles.txtDescription}>{goodsDetail && goodsDetail.details}</Text>
              </View>
            </View>
            <View style={styles.introduceWrap}>
              <View style={styles.introInner}>
                <Text style={styles.truckIntro}>车辆介绍</Text>
              </View>
              <XmWebview
                style={[styles.xmWebviewStyle]}
                enableBaseUrl
                source={this.newHtml()}
                startInLoadingState
                scrollEnabled={!!isAndroid}
              />
            </View>
          </ScrollView>
        </View>
      </SafeAreaView>
    );
  }

  newHtml() {
    const { goodsDetail } = this.state;
    const content = goodsDetail && goodsDetail.content;
    return {
      html: customStyle + content
    };
  }

  goBack = () => {
    msg.emit('router: back');
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: mainBgColorLightGray,

  },
  safeView: {
    flex: 1,
    backgroundColor: mainBgColorWhite
  },
  swiperContainor: {
    width: screenWidth,
    height: screenWidth * 0.8,
  },
  headerWrap: {
    backgroundColor: '#FFFFFF',
    flex: 1
  },
  headTxtWrap: {
    backgroundColor: '#ffffff',
    flex: 1,
    padding: px2dp(16) * 2
  },
  txtName: {
    color: '#343332',
    fontSize: px2dp(18) * 2,
    flex: 1
  },
  salesReal: {
    color: '#999896',
    marginTop: px2dp(4),
    marginLeft: px2dp(20)
  },
  txtDescription: {
    marginTop: px2dp(6) * 2,
    color: '#999896',
    fontSize: px2dp(14) * 2
  },
  introduceWrap: {
    backgroundColor: '#ffffff',
    flex: 1,
    marginTop: px2dp(12) * 2
  },
  introInner: {
    paddingTop: px2dp(12) * 2,
    paddingBottom: px2dp(12) * 2,
    paddingLeft: px2dp(16) * 2,
    paddingRight: px2dp(16) * 2
  },
  truckIntro: {
    color: '#343332',
    fontSize: px2dp(16) * 2
  },
  xmWebviewStyle: {
    width: '100%'
  },

});
